<template>
  <div class="item" :class="bigsmall == 0 ? '' : ''" ref="listItem" @click="chufas">
    <div class="item-t img">
      <!-- <div class="index">{{ item.index }}</div> -->
      <img :src="item.productImage" alt="" />
    </div>
    <div class="item-t proName">{{ item.productName }}</div>
    <div class="item-t salep">{{ item.discnt }}

      <img src="http://sino-sources.com/h5a1/img/fire.gif" v-if="baokuan" alt="" class="icon">

    </div>
    <div class="item-t prize">
      <!-- <div class="old">￥{{ item. }}</div> -->
      <div class="new">￥{{ item.getPrice }}</div>
    </div>
    <div class="item-t copy">
      <div
        class="btn"
        id="btn"
        :data-clipboard-text="item.kouling"
        @click="copy(item.id)"
      >
        复制口令<i class="iconfont icon-jiantou"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { copylinknote } from '@/api/api.js'
import Clipboard from 'clipboard'
export default {
  props: {
    item: {
      type: Object
    },
    isOrnot: {
      type: Number
    }
  },
  data () {
    return {
      height: '',
      bigsmall: '',
      baokuan: false
    }
  },
  watch: {
    isOrnot: function (newval, old) {
      this.bigsmall = newval
    }
  },
  mounted () {
    this.height = this.$refs.listItem.offsetHeight
    this.$emit('realheight', this.height / 2)
    this.bigsmall = this.isOrnot
    if (this.item.index === 1 || this.item.index === 2 || this.item.index === 3 || this.item.index === 4 || this.item.index === 5) {
      this.baokuan = true
    }
  },
  methods: {
    chufas () {
      console.log('dasdada')
    },
    copy (id) {
      this.$emit('copy', this.item.kouling)
      copylinknote(id)
      // const copybtn = document.getElementById('btn')
      // var clipBoard = new Clipboard(copybtn);
      var clipBoard = new Clipboard('#btn')
      clipBoard.on('success', function () {
        clipBoard.destroy() // 销毁上一次的复制内容
        clipBoard = new Clipboard('#btn')
        alert('您已成功复制口令，打开手淘抢购吧')
      })
      clipBoard.on('error', function () {
        alert('复制失败，请手动复制')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  width: 100vw;
  height: 1rem;
  border-top: 1px solid #c1c1c1;
  display: flex;
  position: relative;
  .item-t {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .index {
    color: #6f6f6e;
  }
  .img {
    position: relative;
    img {
      width: 0.9rem;
      height: 0.9rem;
    }

  }
  .proName {
    color: #777777;
    font-size: 0.2rem;
    line-height: 1.5em;
  }
  .salep {
    color: #c76668;
    font-size: 0.2rem;
    font-weight: 700;
    line-height: 1.5em;
    .icon{
      width: 0.4rem;
      height: 0.4rem;

    }
  }
  .prize {
    flex-direction: column;
    .old {
      color: #585858;
      font-size: 0.2rem;
      text-decoration: line-through;
    }
    .new {
      color: #d24f5a;
      font-weight: 800;
      font-size: 0.25rem;
    }
  }
  .copy {
    display: flex;
    flex-direction: column;
    .btn {
      width: 1.3rem;
      text-align: center;
      font-size: 0.2rem;
      color: #ffffff;
      background-color: #25ac56;
      padding-top: 0.4em;
      padding-bottom: 0.4em;
      padding-left: 0.2em;
      padding-right: 0.2em;
      border-radius: 100px;
      .iconfont {
        font-size: 0.2rem;
      }
    }
  }
}
.itemchose {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.clickbtn {
  width: 0.5rem;
  height: 0.5rem;
  // position: absolute;
  // bottom: 0;
  // right: 0.5rem;
}
</style>
